<template>
  <view>
    <!-- 搜索框组件 -->
    <seachInput />
    <!-- 轮播图页面 -->
    <view class="banner_swiper">
      <swiper
        class="swiper"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <block v-for="(item) in swiperList" :key="item.goods_id">
          <swiper-item>
            <view class="swiper-item uni-bg-red">
              <image mode="widthFix" :src="item.image_src" />
            </view>
          </swiper-item>
        </block>>
      </swiper>
    </view>
    <!-- 菜单导航栏 -->
    <view class="menubar">
      <block v-for="(item, index) in menuList" :key="index">
        <view class="menubar_item">
          <image mode="widthFix" :src="item.image_src" @click="navList(item,index)" />
        </view>
      </block>
    </view>
    <!--楼层数据渲染 -->
    <view class="floorlist">
      <block v-for="(item, index) in floorList" :key="index">
        <view class="floorlist_item">
          <view class="floorlist_item_title">
            <image mode="widthFix" :src="item.floor_title.image_src" />
          </view>

          <view class="floorlist_item_main">
            <view class="floorlist_item_main_left">
              <image
                mode="widthFix"
                :src="item.product_list[0].image_src"
                @click="goodList(item.product_list[0])"
              />
            </view>
            <view class="floorlist_item_main_right">
              <block v-for="(v, i) in hostSale[index]" :key="i">
                <image :src="v.image_src" @click="goodList(v)" />
              </block>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>
<script>
/*  4、楼层信息
 * 	4.1 布局，关键技术:通过浮动布局或者使用左右布局
 * 	4.2 请求数据、渲染数据（涉及到嵌套循环，第一层循环楼层、第二层循环商品信息）
 * 	4.2 点击卡片跳转到相应链接
 *  4.3 返回的导航url需要调整
 *
 * 5、技术优化需求
 * 	5.1 封装网络请求工具
 * 		5.1.1 URL统一管理
 * 		5.1.2 满足不同的请求方式，GET POST
 * 		5.1.3 数据异常的时候，在网络层统一处理
 * 6、页面跳转的两个方法
 * 		第一种方法：使用navigator
 * 		第二种方法：使用API: uni.navigateTo({ url })
 * 7、下拉刷新
 *    7.1 打开下拉刷新
 *    7.2 在回调函数中重新请求数据
 * 	  7.3 收回加载状态 uni.stopPullDownRefresh();
 *    7.4 显示loading状态，uni.showLoading({ title })
 * 	  7.5 隐藏loading状态 uni.hideLoading() */
import seachInput from "../../components/seachInput";
import http from "../utils/http";
export default {
  data() {
    return {
      swiperList: [],
      menuList: [],
      floorList: [],
      hostSale: [],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500
    };
  },
  components: {
    seachInput
  },
  onLoad() {
    // 发出轮播图请求
    this.getSwiper();
    //  发送菜单栏icon数据请求
    this.getMenuIconList();
    // 发送获取楼层数据请求
    this.getFloorData();
  },
  // 下拉刷新
  async onPullDownRefresh() {
    // // 发出轮播图请求
    // this.getSwiper();
    // //  发送菜单栏icon数据请求
    // this.getMenuIconList();
    // // 发送获取楼层数据请求
    // this.getFloorData();
    // // 下拉提示框
    uni.showLoading({
      title: "加载中"
    });
    // 将请求变成await形式
    await Promise.all([
      this.getSwiper(),
      this.getMenuIconList(),
      this.getFloorData()
    ]);
    // 请求完毕后隐藏提示框
    uni.hideLoading();
    uni.stopPullDownRefresh();
  },
  methods: {
    // 轮播图请求
    async getSwiper() {
      // 使用优化过后的get请求
      // http.get("/home/swiperdata", {}, data => {
      //   // console.log(data);
      this.swiperList = await http.get("/home/swiperdata");
      // });
    },
    // 请求菜单栏icon数据
    async getMenuIconList() {
      const data = await http.get("/home/catitems");
      let menuList = data;
      menuList.forEach(item => {
        // console.log(item);
        if (item.navigator_url) {
          item.navigator_url = item.navigator_url.replace("main", "index");
        }
      });
      this.menuList = menuList;
      // http.get("/home/catitems", {}, data => {
      //   let menuList = data;
      //   menuList.forEach(item => {
      //     // console.log(item);
      //     if (item.navigator_url) {
      //       item.navigator_url = item.navigator_url.replace("main", "index");
      //     }
      //   });
      //   this.menuList = menuList;
      // });
    },
    // 请求楼层数据
    async getFloorData() {
      let data = await http.get("/home/floordata");
      this.floorList = data;
      // 将product_list映射到一个新数组中
      let floorItems = data.map((item, inedx) => {
        return item.product_list;
      });
      let hostList = [];
      // 通过循环遍历删除内部数组中的第一份数据
      floorItems.forEach(element => {
        hostList.push(element.slice(1));
      });
      
      this.hostSale = hostList;
      // console.log(  this.hostSale);
      
      // http.get("/home/floordata", {}, data => {
      //   this.floorList = data;
      //   // 将product_list映射到一个新数组中
      //   let floorItems = data.map((item, inedx) => {
      //     return item.product_list;
      //   });
      //   let hostList = [];
      //   // 通过循环遍历删除内部数组中的第一份数据
      //   floorItems.forEach(element => {
      //     hostList.push(element.slice(1));
      //   });
      //   this.hostSale = hostList;
      // });
    },

    // 导航栏跳转分类页
    navList(item) {
      // console.log(item);
      if (item.navigator_url) {
        // 跳转tabBar页面的方法
        uni.switchTab({
          url: item.navigator_url
        });
      }
    },
    // 楼层左边大图片的点击跳转函数
    goodList(item) {
      // console.log(item);
      // console.log(item.navigator_url);
      //处理返回的跳转路径处
      item.navigator_url = item.navigator_url.replace(
        "goods_list?",
        "goods_list/index?"
      );
      uni.navigateTo({
        url: item.navigator_url
      });
    }
  }
};
</script>

<style scoped lang="less">
// 轮播图
.swiper {
  width: 750rpx;
  image {
    width: 100%;
  }
}
// 菜单栏
.menubar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  &_item {
    flex: 1;
    image {
      width: 100%;
    }
  }
}
// 楼层导航
.floorlist {
  width: 750rpx;

  .floorlist_item {
    width: 100%;
    .floorlist_item_title {
      width: 100%;
      padding: 10rpx 0;
      image {
        width: 100%;
      }
    }
    .floorlist_item_main {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .floorlist_item_main_left {
        width: 232rpx;
        padding-left: 15rpx;
        image {
          width: 100%;
        }
      }

      .floorlist_item_main_right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        image {
          width: 45%;
          height: 188rpx;
          margin: 1.7%;
        }
      }
    }
  }
}
</style>